<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="张三的前端开发工程师简历" />
    <title>张三 - 前端开发工程师 | 个人简历</title>
    <style>
      /* 符合标准的CSS样式 */
      body {
        font-family: "Segoe UI", system-ui, sans-serif;
        line-height: 1.6;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }

      header {
        text-align: center;
        margin-bottom: 2rem;
        border-bottom: 2px solid #3498db;
        padding-bottom: 1rem;
      }

      section {
        margin-bottom: 2rem;
      }

      h1,
      h2 {
        color: #2c3e50;
      }

      @media (prefers-color-scheme: dark) {
        body {
          background: #1a1a1a;
          color: #f8f9fa;
        }
        h1,
        h2 {
          color: #64b5f6;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <h1>张三</h1>
      <p>前端开发工程师 | 求职目标：大厂实习</p>
    </header>

    <main>
      <section>
        <h2>教育背景</h2>
        <ul>
          <li>
            <strong>XX大学</strong>
            | 计算机科学与技术 | 硕士 | 2023-2026
          </li>
          <li>
            <strong>XX大学</strong>
            | 软件工程 | 学士 | 2019-2023
          </li>
        </ul>
      </section>

      <section>
        <h2>技术技能</h2>
        <ul>
          <li>HTML5/CSS3（通过W3C验证）</li>
          <li>JavaScript（ES6+）</li>
          <li>Vue.js框架</li>
          <li>响应式设计</li>
        </ul>
      </section>

      <section>
        <h2>项目经历</h2>
        <article>
          <h3>个人简历网站</h3>
          <p>符合W3C标准的响应式简历页面，通过无障碍测试</p>
          <p>
            <strong>技术栈：</strong>
            HTML5, CSS3, 响应式设计
          </p>
        </article>
      </section>

      <section>
        <h2>证书验证</h2>
        <p>
          <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fexample.com%2Fresume.html" title="W3C验证报告">
            <img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" width="64" height="64" alt="HTML5验证通过" />
          </a>
        </p>
      </section>
    </main>

    <footer>
      <p>&copy; 2025 张三 | 联系方式: zhangsan@example.com</p>
    </footer>
  </body>
</html>
